<template>
	<view>
		
		<view class="from_box">
			<view class="input">
				<view class="text">收货人</view>
				<input autocomplete="off" v-model="info.realName" placeholder="姓名" />
			</view>
			<view class="input">
				<view class="text">手机号码</view>
				<input autocomplete="off" v-model="info.phone" placeholder="手机号" />
			</view>
			<view class="input" @click="areaShow=true">
				<view class="text" style="width:30%;">选择地区</view>
				<view style="width: 100%;">
				
					<input disabled v-model="site" placeholder="省、市、区" />
					
				</view>
			</view>
			<view class="inputs">
				<textarea autocomplete="off" v-model="info.detail" placeholder="请填写详细的地址(街道、楼牌等)"></textarea>
			</view>
			<view class="check_box">
				<view class="text">设为默认地址</view>
                <u-switch activeColor="#FF4E1B" v-model="info.isDefault"></u-switch>
			</view>
			<view class="yes_box" @click="set()">确定</view>
		</view>
		<u-picker :show="areaShow" ref="uPicker" @change='changeHandler' :columns="area" keyName='name'
			@cancel='areaShow=false' @confirm='setRegion'></u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {addressEdit,addressInfo,areas} from '@/require/api.js';
	
	export default {
		components: {
			
		},
		data() {
			return {
                 info:{id:'',isDefault:true,realName:'',phone:'',detail:''},
				 areaShow:false,
				 area:[],
				 site:'',
				 address:{city:'',district:'',province:''}
			};
		},
		onLoad(data) {
			this.getArea();
			if(data.id){
				this.getInfo(data.id);
			}
		},
		methods:{
		 	async getInfo(id){
				let {data}=await addressInfo({id:id});
				this.info=data;
				
				this.site =data.province + '/' + data.city + '/' + data.district;
				this.address.province=data.province;
				this.address.city=data.city;
				this.address.district=data.district;
				
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, 
					index,
				
					picker = this.$refs.uPicker
				} = e
				console.log(e);
				let item=values[columnIndex][index];
				if (columnIndex === 0) {
				   
				    
				   
					picker.setColumnValues(1, item['child'])
					picker.setColumnValues(2, item['child'][0]['child'])
				}
				if (columnIndex === 1) {
					
					picker.setColumnValues(2, item['child'])
				}
			},
			setRegion(e) {
				console.log(e);
				let item = e.value;
				this.site = item[0].name + '/' + item[1].name + '/' + item[2].name;
				this.address.province=item[0].name;
				this.address.city=item[1].name;
				this.address.district=item[2].name;
				//this.address.cityId=item[2].cityId;
				this.areaShow=false;
			},
			async getArea() {
				let {
					data
				} = await areas();
				
				
				this.area[0] = data;
				this.area[1] =data[0]['child'];
				this.area[2] = data[0]['child'][0]['child'];
				
			},
		    async set(){
				let params={};
				let e=JSON.parse(JSON.stringify(this.info));
				params.id=e.id;
				params.realName=e.realName;
				params.phone=e.phone;
				params.isDefault=e.isDefault;
				params.detail=e.detail;
				params.address=JSON.parse(JSON.stringify(this.address));
				let {data,code,message}=await addressEdit(params);
				if(code==200){
					this.$project.toast(message);
					setTimeout(()=>{
						this.$project.toBack();
					},500);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.from_box {
		box-sizing: border-box;
		padding: 0 30rpx;
        font-size: 26rpx;
		.input {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
			box-sizing: border-box;
			padding: 20rpx 0;

			input {
				border: none;
				height: 100%;
				width: 100%;
			}
		}

		.inputs {
			width: 100%;
			height: 100rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;

			textarea {
				width: 100%;
				border: none;
				height: 95%;
				box-sizing: border-box;
				padding: 20rpx 0;
				
			}
		}
	}

	.text {
		width: 30%;
		font-weight: bold;
		color: #333333;
	}

	.check_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.yes_box {
		margin: 20rpx 4%;
		width: 92%;
		text-align: center;
		color: #fff;
		background: #FF4E1B;
		border-radius: 25rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
